import { FC, useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import { getUserInfoList } from '../../apis/user/userInfo';
import { UserInfo, UserInfoParams } from '../../apis/user/type';
import { Button, Form, Input, Pagination, Select, Table, TableProps } from 'antd';
import { TableRowSelection } from 'antd/es/table/interface';
import AddUser from '../../componenst/userInfo/Add'

const Index = (): JSX.Element => {

    const [params, setParams] = useState<UserInfoParams>({ page: 1, psize: 10, key: "", name: "" })
    const [list, setList] = useState<Array<UserInfo>>([])
    const [total, setTotal] = useState(0);
    const baseURL = import.meta.env.VITE_IMG_BASE_URL;


    const getData = async () => {

        const res = await getUserInfoList(params);

        setList(res.list);
        setTotal(res.counts);

        console.log(1111, res);

    }
    // const onChange=(page:number,psize:number)=>{

    //     console.log("aaa",page,psize);


    //     setParams({...params,page,psize})


    // }
    const del = (id: number) => {
        alert(id);
    }
    useEffect(() => {
        getData();
    }, [params])

    const columns: TableProps<UserInfo>['columns'] = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '头像',
            dataIndex: 'photo',
            key: 'photo',
            render: (_, row) => (
                <>
                    <img src={baseURL + row.photo} style={{ height: '50px' }} />
                </>
            )
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '电话',
            dataIndex: 'mobile'
        },
        {
            title: '类型',
            dataIndex: 'usertypeName'
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: 'name',
            width: '180px',
            render: (val, row) => (
                <>
                    <Button type="primary">修改</Button>
                    <Button onClick={() => del(row.id)} danger type="primary">删除</Button>
                </>
            )
        },
    ];

    const PaginationConfig = {
        pageSizeOptions: [10, 30, 50, 100, 200],
        onChange: (page: number, psize: number) => {
            setParams({ ...params, page, psize })
        },
        current: params.page,
        total: total

    }

    const onFinish = (values: UserInfoParams) => {

      
        setParams({ ...params,...values})

    }

    const selectConfig={
        fieldNames:{value:"id",label:"name"},
        options:[{
            id:1,name:"业主"
          },
        {
            id:2,name:"租户"
        }
         ]
    }

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [selectedRows, setSelectedRows] = useState<UserInfo[]>([]);
 
    const rowSelection: TableRowSelection<UserInfo> = {
        selectedRowKeys,
        onChange: (data: React.Key[],selectedRows:UserInfo[]) => {

            console.log("得到选中的数据",data);

            console.log("selectedRows",selectedRows);

            setSelectedRows(selectedRows);
            

            setSelectedRowKeys(data);
            
             
          },
      };

      const delAll=()=>{

        console.log("要删除的id",selectedRowKeys);

        console.log("选中的数据",selectedRows);
        
        

      }

      //添加居民
      const [isAddShow,setIsAddShow]=useState(false)
      const add=()=>{
        setIsAddShow(true);
      }
      const closeAdd=(val:string)=>{

        setIsAddShow(false);
 

      }
   


    return (
        <div style={{ width: "100%" }}>
            居民管理


            <Form  layout="inline" onFinish={onFinish}>

                <Form.Item<UserInfoParams> label="姓名" name="name">
                    <Input allowClear placeholder="请输入姓名" />
                </Form.Item>

                <Form.Item<UserInfoParams> label="电话" name="mobile">
                    <Input allowClear placeholder="请输入电话" />
                </Form.Item>

                <Form.Item<UserInfoParams> name="usertype">

                <Select style={{ width: 120 }} {...selectConfig} />
                </Form.Item>

                <Form.Item >
                    <Button type="primary" htmlType="submit">搜索</Button>
                </Form.Item>

            </Form>
            <Button type="primary" onClick={delAll}>删除</Button>
            <Button type="primary" onClick={add}>添加</Button>
 
            <Table<UserInfo>  rowSelection={rowSelection} pagination={false} style={{ width: "100%" }} rowKey="id" dataSource={list} columns={columns} />

            <Pagination {...PaginationConfig} />
            
         {
            isAddShow && 
            <AddUser close={closeAdd}></AddUser>
         }

            
      
        </div>
    )
}
export default Index;